<template>
  <el-row align="middle" v-if="(relType == 'media' && dataInfo.hasseries == 0 && dataInfo.tplid != '5f87ffba1d6e6' && dataInfo.tplid != '5f87f5b15a8c0') || relType == 'series'">
    <el-col :span="12">
      <div>
        <span class="mediatitle" style="margin-bottom:0">
          <span v-if="filetype == 'video'">视频介质</span>
          <span v-else>音频介质</span>
          <span v-if="tableData.listData.length > 0">({{tableData.listData.length}})</span>
        </span>
        <span v-if="!enabledEditVideo">
          <a href="javascript:;" @click="handleRefVideo" v-if="currentCorpid === dataInfo.corpid">
            <el-tag size="mini">
              <el-icon>
                <plus />
              </el-icon>
              增加
            </el-tag>
          </a>
        </span>
      </div>
    </el-col>
    <el-col :span="12">
      <div align="right" v-if="enabledEditVideo && currentCorpid == dataInfo.corpid">
        <span v-if="isedit">
          <el-button type="primary" size="mini" @click="handleRefVideo">
            <el-icon>
              <plus />
            </el-icon>
            <span v-if="filetype == 'video'">添加视频</span>
            <span v-else>添加音频</span>
          </el-button>
        </span>
      </div>
    </el-col>
  </el-row>
  <el-table class="mt10" v-loading="isloading" :data="tableData.listData" style="width: 100%" border>
    <el-table-column label="遮罩图" :width="80">
      <template #default="{row, $index}">
        <el-image
          v-if="row.maskimg && row.maskimg.viewurl"
          :src="row.maskimg.viewurl"
          :initial-index="$index"
          :preview-src-list="imgSrcList"
        />
      </template>
    </el-table-column>
    <el-table-column label="介质类型" :width="100">
      <template #default="{row}">
        <span v-if="row.videotype == 'vod'">点播介质</span>
        <span v-else>直播介质</span>
      </template>
    </el-table-column>
    <el-table-column label="介质名称" show-overflow-tooltip :width="260">
      <template #default="{row}">
        <a href="javascript:;" v-if="filetype == 'video'" @click="handleVideoPlay(row)" class="flex align-items">
          <el-icon>
            <video-play />
          </el-icon>
          <span class="txttdellipsis">{{row.name}}</span>
        </a>
        <template v-else>
          <audio-table-column
            :ref="el => { if(el) audioTableColumn[row.videoid] = el }"
            :row="row"
            sourcefrom="local"
            @handleAudioPlay="handleAudioPlay"
          />
        </template>
      </template>
    </el-table-column>
    <el-table-column label="FID/播放地址">
      <template #default="{row}">
        <div>
              <span v-if="row.sourceid" class="flex align-items">
                <span class="txttdellipsis" style="width:80%">{{row.sourceid}}</span>
                <copy-button :copy-content="row.playurl" />
              </span>
          <span v-else>-</span>
        </div>
        <div>
              <span v-if="row.url" class="flex align-items">
                <span class="txttdellipsis" style="width:80%">{{row.url}}</span>
                <copy-button :copy-content="row.playurl" />
              </span>
          <span v-else>-</span>
        </div>

      </template>
    </el-table-column>
    <el-table-column label="分辨率" :width="80">
      <template #default="{row}">
        <span v-if="row.extends && row.extends.width && row.extends.height">{{row.extends.width + ' * ' + row.extends.height}}</span>
        <span v-else>-</span>
      </template>
    </el-table-column>
    <el-table-column label="时长" prop="duration" :width="100">
      <template #default="{row}">
        <span v-if="row.extends && row.extends.duration">{{formatSeconToTime(row.extends.duration)}}</span>
        <span v-else>-</span>
      </template>
    </el-table-column>
    <el-table-column label="介质来源" :width="100">
      <template #default="{row}">
        <span v-if="row.sourcefrom == 'cloudstorage'">云存储</span>
        <span v-else-if="row.sourcefrom == 'cloudlive'">云直播</span>
        <span v-else-if="row.sourcefrom == 'unknown'">未知</span>
        <span v-else-if="row.sourcecfrom == 'lishipin'">梨视频</span>
        <span v-else-if="row.sourcefrom == 'xituo'">喜拓</span>
        <span v-else-if="row.sourcefrom == 'taobao'">淘宝</span>
        <span v-else>未知</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" :width="180">
      <template #default="{row}">
        <span v-if="currentCorpid == dataInfo.corpid">
          <span v-if="enabledEditVideo">
            <el-button type="text" @click="handleEditVideo(row)" :disabled="!isedit">编辑</el-button>
            <el-button type="text" :style="{color: isedit ? 'red': ''}" @click="handleDeleteVideo(row)" :disabled="!isedit">删除</el-button>
            <screen-shot-button
                    :disabled="!isedit"
                    type="text"
                    :row="row"
                    @resultcallback="resultcallback"
            />
          </span>
          <span v-else>
            <el-button type="text" @click="handleEditVideo(row)">编辑</el-button>
            <el-button type="text" style="color: red" @click="handleDeleteVideo(row)">删除</el-button>
            <screen-shot-button
                    :row="row"
                    type="text"
                    @resultcallback="resultcallback"
            />
          </span>
        </span>
        <span v-else>
          <el-button type="text" :disabled="true">编辑</el-button>
          <el-button type="text" :disabled="true">删除</el-button>
          <screen-shot-button :disabled="true" :row="row"/>
        </span>
      </template>
    </el-table-column>
  </el-table>
  <rel-video-medium
          ref="relVideoMediumRef"
          :dialog-rel-video-visible="dialogRelVideoVisible"
          :dialog-rel-video-title="dialogRelVideoTitle"
          :dialog-rel-video-mediatype="relType"
          :dialog-rel-video-form-data="dialogRelVideoFormData"
          :videotype="videotype"
          :filetype="filetype"
          @handleCancelVideoDialog="handleCancelVideoDialog"
          @handleVideoPlay="handleVideoPlay"
          @reloadMediaData="getVideoDataList"
  />

  <edit-video-medium
    :dialog-visible="dialogVisible"
    :dialog-title="dialogTitle"
    :dialog-form-data="dialogFormData"
    @handleCloseDialog="handleCloseDialog"
    @handleVideoPlay="handleVideoPlay"
    @getVideoDataList="getVideoDataList"
  />
</template>

<script>
  import {ref, reactive, nextTick} from 'vue'
  import {
    getMediaVideos,
    seriesRefVideos,
    editSeriesRefVideoSort,
    deleteSeriesRefVideo,
    editMediaRefVideoSort,
    deleteMediaRefVideo
  } from "@/api/media/media";
  import {ElMessage, ElMessageBox} from "element-plus";
  import RelVideoMedium from "../Medium/RelVideoMedium";
  import CopyButton from "@/components/Copy/CopyButton";
  import EditVideoMedium from "../Medium/EditVideoMedium";
  import AudioTableColumn from "@/components/Common/AudioTableColumn";
  import { formatSeconToTime } from "@/utils/usage-config";
  import ScreenShotButton from "@/components/VideoScreenShot/ScreenShotButton";
  import { seriesRelImageMediums, mediaRelImages} from "@/api/media/media";

  export default {
    name: "VideoMedium",
    props: {
      dataInfo: {
        type: Object,
        required: true
      },
      relType: {
        type: String,
        default: 'media'
      },
      currentCorpid: {
        type: Number,
        required: true
      },
      enabledEditVideo: {
        type: Boolean,
        default: false
      },
      isedit: {
        type: Boolean,
        default: true
      },
      filetype: {
        type: String,
        default: 'video'
      }
    },
    components: {RelVideoMedium, CopyButton, EditVideoMedium, AudioTableColumn, ScreenShotButton},
    emits: ['handleVideoPlay', 'reloadImageList'],
    setup(props, context) {
      const tableData = reactive({
        total: 0,
        listData: []
      })
      const isloading = ref(false)
      /** 关联视频介质相关参数开始 **/
      const dialogRelVideoVisible = ref(false)
      const dialogRelVideoTitle = ref('')
      const dialogRelVideoFormData = reactive({
        mediaid: undefined,
        seriesid: undefined,
        groupid: undefined,
        datas: []
      })
      const relVideoMediumRef = ref(null)
      const videotype = ref(undefined)
      /** 关联视频介质相关参数结束 **/
      const imgSrcList = ref([])

      const getVideoDataList = () => {
        isloading.value = true
        if (props.relType == 'media') {
          getMediaVideos({mediaid: props.dataInfo.mediaid}).then(response => {
            isloading.value = false
            tableData.listData = response.data
          })
        } else {
          seriesRefVideos({seriesid: props.dataInfo.seriesid}).then(response => {
            isloading.value = false
            tableData.listData = response.data
            imgSrcList.value = []
            tableData.listData.forEach(row => {
              if (row.maskimg && row.maskimg.viewurl) {
                imgSrcList.value.push(row.maskimg.viewurl)
              } else {
                imgSrcList.value.push('')
              }
            })
          })
        }
      }

      const handleSortVideo = (row) => {
        const title = props.relType == 'media' ? '节目集' : '子集'
        const typeName = props.filetype == 'video' ? '视频' : '音频'
        ElMessageBox.prompt('编辑'+title+ typeName + row.name + ' 排序', '编辑' + title + typeName + '排序', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          inputPlaceholder: '请输入' + title + typeName +'排序序号',
          inputValue: row.relsort,
          inputPattern: /\d/,
          inputErrorMessage: '只能输入数字'
        }).then((value) => {
          if (props.relType == 'media') {
            editMediaRefVideoSort({relid: row.relid, sort: value.value}).then(response => {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              getVideoDataList()
            })
          } else {
            editSeriesRefVideoSort({relid: row.relid, sort: value.value}).then(response => {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              getVideoDataList()
            })
          }
        }).catch(() => {})
      }
      const handleDeleteVideo = (row) => {
        const title = props.relType == 'media' ? '节目集' : '子集'
        const typeName = props.filetype == 'video' ? '视频' : '音频'
        ElMessageBox.confirm('确定要删除'+title+'关联的' + typeName + '介质 ' + row.name + ' 吗？', '删除'+title+'关联的' + typeName + '介质', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'wanring'
        }).then(() => {
          if (props.relType == 'media') {
            deleteMediaRefVideo({mediaid: props.dataInfo.mediaid, videoid: row.videoid}).then(response => {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              getVideoDataList()
            })
          } else {
            deleteSeriesRefVideo({seriesid: props.dataInfo.seriesid, videoid: row.videoid}).then(response => {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              getVideoDataList()
            })
          }
        }).catch(() => {})
      }
      const handleRefVideo = () => {
        dialogRelVideoFormData.groupid = props.dataInfo.groupid
        if (props.relType == 'media') {
          dialogRelVideoFormData.mediaid = props.dataInfo.mediaid
          dialogRelVideoFormData.seriesid = undefined
          dialogRelVideoTitle.value = '媒资节目集 ' + props.dataInfo.name + ' 关联介质'
        } else {
          dialogRelVideoFormData.mediaid = undefined
          dialogRelVideoFormData.seriesid = props.dataInfo.seriesid
          dialogRelVideoTitle.value = '媒资子集 ' + props.dataInfo.name + ' 关联介质'
          if (props.dataInfo.tplid == 'f904db468ed111ecb86d00163e30b2e1') {
            // 点播视频介质
            videotype.value = 'vod'
          } else if (props.dataInfo.tplid == 'bcf23e6ca1ac11ec9003ecf4bbdc75f0') {
            //  直播视频介质
            videotype.value = 'live'
          }
        }
        dialogRelVideoFormData.datas = []
        dialogRelVideoVisible.value = true
        nextTick(() => {
          relVideoMediumRef.value.init()
        })
      }
      const handleCancelVideoDialog = () => {
        dialogRelVideoVisible.value = false
      }
      const handleVideoPlay = (row) => {
        context.emit('handleVideoPlay', row)
      }

      /** 编辑视频介质开始 **/
      const dialogVisible  = ref(false)
      const dialogTitle = ref('')
      const dialogFormData = reactive({
        relid: undefined,
        sort: 1,
        video: {
          maskimgid: 0,
        },
        viewurl: ''
      })
      const handleEditVideo = (row) => {
        dialogFormData.relid = row.relid
        dialogFormData.sort = row.relsort
        dialogFormData.video.maskimgid = (row.maskimg && row.maskimg.imgid) ? row.maskimg.imgid : 0
        dialogTitle.value = '编辑视频 ' + row.name
        dialogFormData.viewurl = (row.maskimg && row.maskimg.viewurl) ? row.maskimg.viewurl : ''
        dialogVisible.value = true
      }
      const handleCloseDialog = () => {
        dialogVisible.value = false
      }
      /** 编辑视频介质结束 **/

      const audioTableColumn = ref([])
      const handleAudioPlay = (refKey) => {
        Object.keys(audioTableColumn.value).forEach(videoid => {
          if (refKey != parseInt(videoid)) {
            audioTableColumn.value[videoid].audioPause()
          }
        })
      }

      const resultcallback = (data) => {
        const postData = {
          seriesid: undefined,
          mediaid: undefined,
          datatype: 1,
          groupid: 0,
          datas: []
        }
        data.forEach(img => {
          postData.datas.push(img.imgid)
        })
        if (props.relType == 'media') {
          postData.mediaid = props.dataInfo.mediaid
          postData.seriesid = undefined
          mediaRelImages(postData).then(response => {
            if (response.errcode === 0) {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              context.emit('reloadImageList')
            }
          })
        } else {
          postData.mediaid = undefined
          postData.seriesid = props.dataInfo.seriesid
          seriesRelImageMediums(postData).then(response => {
            if (response.errcode === 0) {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              context.emit('reloadImageList')
            }
          })
        }
      }
      return {
        handleRefVideo,
        tableData,
        isloading,
        handleSortVideo,
        handleDeleteVideo,
        getVideoDataList,
        handleVideoPlay,
        dialogRelVideoFormData,
        dialogRelVideoVisible,
        dialogRelVideoTitle,
        relVideoMediumRef,
        handleCancelVideoDialog,
        videotype,
        handleEditVideo,
        dialogVisible,
        dialogTitle,
        dialogFormData,
        handleCloseDialog,
        imgSrcList,
        audioTableColumn,
        handleAudioPlay,
        formatSeconToTime,
        resultcallback
      }
    }
  }
</script>

<style scoped>

</style>
